<template>
    <div class="home-container">
        <el-row :gutter="15">
            <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<el-card>
						<div>
							<span>个人资料卡</span>
						</div>
						<el-divider></el-divider>
						<div class="block">
							<el-timeline>
								<el-timeline-item  placement="top">
									<el-card>
										<h4>姓名</h4>
										<p>{{$store.state.userInfos.userInfos.name}}</p>
									</el-card>
								</el-timeline-item>
								<el-timeline-item placement="top">
									<el-card>
										<h4>账号</h4>
										<p>{{$store.state.userInfos.userInfos.userName}}</p>
									</el-card>
								</el-timeline-item>
								<el-timeline-item  placement="top">
									<el-card>
										<h4>上次登录时间</h4>
										<p>{{$store.state.userInfos.userInfos.last}}</p>
									</el-card>
								</el-timeline-item>
								<el-timeline-item  placement="top">
									<el-card>
										<h4>权限</h4>
										<p>{{$store.state.userInfos.userInfos.role==1?'管理员':'用户'}}</p>
									</el-card>
								</el-timeline-item>
							</el-timeline>
						</div>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<el-card>
						<div>
							<span>常用功能</span>
						</div>
						<el-divider></el-divider>
						<div class="block">
							<el-timeline>
								<el-timeline-item  placement="top">
									<el-card>
										<router-link to="mysite">
											<i class="el-icon-coffee-cup"></i>
											My Site
										</router-link>
									</el-card>
								</el-timeline-item>
								<el-timeline-item placement="top">
									<el-card>
										<router-link to="wishing">
											<i class="el-icon-magic-stick"></i>
											许愿墙
										</router-link>
									</el-card>
								</el-timeline-item>
								<el-timeline-item  placement="top">
									<el-card>
									<router-link to="user">
										<i class="el-icon-user"></i>
										账号管理
									</router-link>
									</el-card>
								</el-timeline-item>
								<el-timeline-item  placement="top">
									<el-card>
									<router-link to="wish">
										<i class="el-icon-eleme" ></i>
										愿望管理
									</router-link>
									</el-card>
								</el-timeline-item>
								<el-timeline-item  placement="top">
									<el-card>
										<h4>当前时间</h4>
										<p>{{time.txt}}</p>
									</el-card>
								</el-timeline-item>
							</el-timeline>
						</div>
					</el-card>
				</el-col>
            </el-col>

            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <el-card>
                    <div>
                        <span>当前时间：{{time.txt}}</span>
						<el-divider></el-divider>
                        <el-calendar v-model="value">
                        </el-calendar>
                    </div>
                </el-card>
            </el-col>
        </el-row>
<!--        <el-row>-->
<!--            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">-->
<!--                <el-card class="box-card">-->
<!--                    <div slot="header" class="clearfix">-->
<!--                        <span>数据图</span>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        、-->
<!--                    </div>-->
<!--                </el-card>-->
<!--            </el-col>-->
<!--        </el-row>-->
    </div>
</template>

<script>
    import {formatAxis, formatDate} from '@/utils/formatTime';

    export default {
        name: 'home',
        data() {
            return {
                value: new Date(),
                time: {
                    txt: '',
                    fun: null,
                },
            }
        },
        computed: {
            // 获取当前时间
            currentTime() {
                return formatAxis(new Date());
            },
        },
        created() {
            this.initTime();
			// console.log(JSON.stringify(this.$store))
			this.$message({message:this.$store.state.userInfos.userInfos.name + "，欢迎登录",type:'success'});
		},
        methods: {
            // 初始化左上角时间显示
            initTime() {
                this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
                this.time.fun = setInterval(() => {
                    this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
                }, 1000);
            },
        }
    };
</script>

<style scoped lang="scss">
    @import './index.scss';
</style>

